import { trigger, state, transition, style, animate, keyframes, group, stagger, query } from '@angular/animations';
import { Optional } from '@angular/core';

export const listAnimation = trigger('listAnim', [
    transition('* => *', [ // 任意状态到任意状态
        // 进场
        query(':enter', style({ opacity: 0 }), { optional: true }),
        query(':enter', stagger(100, [
            animate('1s', style({ opacity: 1 }))
        ]), { optional: true }),
        // 离场
        query(':leave', style({ opacity: 1 }), { optional: true }),
        query(':leave', stagger(100, [
            animate('1s', style({ opacity: 0 }))
        ]), { optional: true })
    ])
]);
